<template>
    <div>
        <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition">
            <el-row>
                <el-col :span="4">
                    <div style=" text-align : center ">
                        <el-avatar :size="100" :src="require('../../assets/image/user.png')"></el-avatar><br>
                        我的头像
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-form-item label="姓名">
                            <template slot-scope="scope">
                                <span>{{scope.row}}</span>
                            </template>
                            <!-- <el-input v-model="form.name"></el-input> -->
                        </el-form-item>
                        <el-form-item label="性别">
                            <span>{{form.sex}}</span>
                            <!-- <el-input v-model="form.sex"></el-input> -->
                        </el-form-item>
                        <el-form-item label="部门">
                            <span>{{form.dept}}</span>
                            <!-- <el-input v-model="form.dept"></el-input> -->
                        </el-form-item>
                        <el-form-item label="职位">
                            <span>{{form.job}}</span>
                            <!-- <el-input v-model="form.job"></el-input> -->
                        </el-form-item>
                        <el-form-item label="固定电话">
                            <span>{{form.tele}}</span>
                            <!-- <el-input v-model="form.tele"></el-input> -->
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <span>{{form.email}}</span>
                            <!-- <el-input v-model="form.email"></el-input> -->
                        </el-form-item>
                        <el-form-item label="Facebook">
                            <span>{{form.facebook}}</span>
                            <!-- <el-input v-model="form.facebook"></el-input> -->
                        </el-form-item>
                        <el-form-item label="微信">
                            <span>{{form.wechat}}</span>
                            <!-- <el-input v-model="form.wechat"></el-input> -->
                        </el-form-item>
                        <el-form-item>
                            <el-button type="warning" plain @click="modify">修改</el-button>
                            <el-button type="warning" plain @click="onSubmit">确定</el-button>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            labelPosition: 'left',
            form: {
                name: '',
                sex:'男',
                dept: '未设置',
                job: '未设置',
                tele: '未设置',
                email: '未设置',
                facebook: '未设置',
                wechat: '未设置'
            }
        }
    },
    methods: {
        modify() {
            console.log('modify');
        },
        onSubmit() {
            console.log('onSubmit');
        }
    }
}
</script>